<template>
	<view class="order-page" v-if="orderDetail">

		<scroll-view class="scroll-Y" scroll-y>
			<view class="userInfo">
				<view class="c-info c-flex jc-between">
					<view class="p-1">
						<view>{{address||'--'}}</view>
						<view style="margin-top: 20rpx;"> {{orderDetail.lpgUser.name}}
							{{maskPhoneNumber(orderDetail.lpgUser.phone)}}
						</view>
					</view>

				</view>
			</view>
			<view class="p-list">
				<view class="p-l-item">
					<view class="title-con c-flex jc-between c-item-center">
						商品信息

					</view>
					<view class="p-content">
						<view class="p-c-item c-flex jc-between" v-for="(item,i) in orderDetail.skuList" :key="i">
							<view class="goodInfo c-flex c-item-center">
								<view class="goodImg c-flex c-item-center jc-center">
									<image :src="item.pic"></image>
								</view>
								<view class="standards">
									<view>{{item.name}}</view>

									<view>
										单价￥{{item.price}}
									</view>
									<view>数量：x{{item.saleCount}}</view>
								</view>
							</view>

							<view class="saleAmount">
								￥{{item.saleAmount}}
							</view>

						</view>
					</view>
					
					<view class="p-price  c-flex jc-between">
						<view>商品总金额</view>
						<view>￥{{orderDetail.totalAmount}}</view>
					</view>
					<view class="p-price  c-flex jc-between">
						<view>配送费</view>
						<view>￥{{orderDetail.freightAmount}}</view>
					</view>
					<view class="line"></view>
					<view class="p-price  c-flex jc-end">
						<view class="payAmount">
							应付金额：
							<text>￥{{orderDetail.payAmount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="p-list">
				<view class="p-l-item">
					<view class="p-content">
						<view class="p-c-item c-flex jc-between">
							<text>送达时间</text>
							<view class="seleTime c-flex c-item-center" @click="showTime">
								<text v-if="!appointTime">请选择配送时间</text>
								<text v-if="appointTime">{{appointTime}}</text>
								<image class="seleTimeImg" src="@/static/images/index/right-icon.png"></image>
							</view>


						</view>
						<view class="line"></view>
						<view class="p-c-item">
							<text>订单备注</text>
							<textarea class="remarks" placeholder-style="color:#8B959F;font-size: 28rpx;" v-model="note"
								placeholder="如有其他要求,请在此处填写"></textarea>
						</view>
					</view>
				</view>
			</view>
			<view class="p-list">
				<view class="p-l-item">
					<view class="p-content">
						<view class="p-c-item c-flex jc-between c-item-center">
							<text>支付方式：</text>
							<view class=" c-flex c-item-center">
								<image class="wPayIcon" :src='imgUrl'></image>
								<text>微信支付</text>
							</view>
						</view>

					</view>
				</view>
			</view>
		</scroll-view>

		<view class="settlement_panle c-flex jc-between c-item-center">
			<view class="left">
				<view>
					<text>待支付：</text>
					<text>￥{{orderDetail.payAmount}}</text>
				</view>
			</view>
			<view class="right c-flex">

				<view class="settlement" @tap="settlementBtn">
					<text>去支付</text>

				</view>
			</view>
		</view>
		<distribution-box ref="dsbonBox" :getTime.sync='appointTime'></distribution-box>

	</view>
</template>

<script>
	import distributionBox from '@/components/distributionBox/distributionBox.vue'
	import {
		maskPhoneNumber,
		toast,
		debounce
	} from '@/utils/utils.js'
	import {
		mapStatus,
		mapMutations
	} from 'vuex'
	import {
		Subscribe
	} from '@/utils/subscribe.js'
	export default {
		components: {
			distributionBox
		},
		data() {
			return {
				maskPhoneNumber: maskPhoneNumber,
				imgUrl: this.$API.IMG_URL + '/liquefied-mall/common/wPay.png',
				orderDetail: null,
				sendTime: '',
				note: '',
				appointTime: '',
				cartIds: '',
				lpgUserId: null,
				address: '',
				goodsIdArr:[]
			};
		},
		onLoad(options) {

			this.orderDetail = JSON.parse(options.data)
			this.goodsIdArr = JSON.parse(options.goodsIdArr);
			this.lpgUserId = options.lpgUserId;
			this.cartIds = options.cartIds;
			const addr=this.$store.getters.userSeleAddr;
			console.log(addr)
			if(addr){
				this.address =`${addr.street}${addr.villageName}${addr.address}`;
			}
			
			//this.address = this.orderDetail.lpgUser.street + this.orderDetail.lpgUser.villageName + this.orderDetail.lpgUser.address
				
			//console.log(this.orderDetail)
			uni.setNavigationBarColor({
				backgroundColor: '#f9ead5',
				frontColor: '#000000'
			});
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.dsbonBox.getNextDay();
			})
		},
		methods: {
			
			showTime() {
				this.$refs.dsbonBox.showBox();
			},

			settlementBtn: debounce(function() {

				if (!this.appointTime) {
					toast('请选择配送时间');
					return
				}
				let data = {
					lpgUserId: this.lpgUserId,
					cartIds: this.cartIds,
					appointTime: this.appointTime,
					note: this.note
				}
				this.$API.simbutOrder(data).then(res => {
					if (res.code === 0) {
						uni.$emit('updateGoodCount')
						this.$store.commit('setCartSeleCount', 0)
						//Subscribe(['RIzTdPtAsX1M5PtjCGNQVA2ixV2aFhkQeoewnMJL5rs']);
						this.wxPay(res.prepayInfo)
					}
				}).catch(() => {

				});


			}, 500),
			wxPay(res) {
				let that = this;
				wx.requestPayment({
					provider: "wxpay",
					timeStamp: String(res.timeStamp),
					nonceStr: String(res.nonceStr),
					package: String(res.packageValue),
					signType: String(res.signType),
					paySign: String(res.paySign),
					appId: res.appId,
					success(res) {
						console.log(res)
						toast("支付成功");
						that.claerChooseGood()
						uni.switchTab({
							url: '/pages/plat-menu/order'
						})

					},
					fail(res) {
						console.log(res)
						
						that.claerChooseGood()
						uni.switchTab({
							url: '/pages/plat-menu/order'
						})
						toast(res);
					}
				})
			},
			claerChooseGood(){
				console.log(this.goodsIdArr)
				const arr =this.$store.getters.cartChooseGood.filter((v) => !this.goodsIdArr.some((val) => val === v.id))
				console.log(arr)
				this.$store.commit('setCartChooseGood',arr);
			}
		}
	}
</script>
<style lang="scss" scoped>
	//混合
	@mixin left-font ($size: 30rpx) {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: $size;
		color: #333333;
	}

	.order-page {
		position: relative;
		background-image: linear-gradient(rgba(249, 195, 115, .3) 0%, #F9F9F9 100%);
		height: 100%;
		padding-bottom: 10px;
		/* 根据需要调整padding值 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 使用环境变量 */
		.scroll-Y {
			height: 1280rpx;
		}

		.wPayIcon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		.line {
			width: 658rpx;
			height: 0;
			border: 2rpx solid #F3F3F3;
			margin: 30rpx auto 0;
		}

		.remarks {
			margin: 20rpx auto;
			width: 621rpx;
			height: 126rpx;
			border-radius: 16rpx;
			border: 2rpx solid #DEDEDE;
			padding: 20rpx 22rpx;
		}

		.userInfo {
			margin: 0rpx 18rpx 0;
			position: relative;
			top: 40rpx;

			.c-info {
				background: #FFFFFF;
				border-radius: 18rpx;
				padding: 22rpx 28rpx 35rpx;
				margin-bottom: 20rpx;
				position: relative;

				.p-1 {
					width: 85%;
					// font-family: PingFang-SC, PingFang-SC;
					// font-weight: 500;
					// font-size: 30rpx;
					// color: #333333;
					@include left-font
				}

			}

		}

		.p-list {
			margin: 0rpx 18rpx 0;
			position: relative;
			top: 40rpx;

			.p-l-item {
				background: #FFFFFF;
				border-radius: 18rpx;
				padding: 15rpx 28rpx 15rpx;
				margin-bottom: 20rpx;
				position: relative;

				.title-con {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					padding-top: 18rpx;
				}

				.p-content {
					margin: 25rpx 0 0;

					.saleAmount {
						margin-top: 10rpx;
					}

					.p-c-item {
						margin: 24rpx 0;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;

						.seleTime {
							.seleTimeImg {
								width: 14px;
								height: 14px;
							}

							text {
								font-family: PingFang-SC, PingFang-SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #6A6969;

							}
						}

						.goodInfo {
							width: 80%;

							.goodImg {
								width: 98rpx;
								height: 94rpx;
								background: #F5F5F5;
								border-radius: 14rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.standards {
								margin-left: 18rpx;

								view {
									font-family: PingFang-SC, PingFang-SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #333333;
									margin-top: 10rpx;
								}

								view:nth-child(1) {

									font-weight: 500;
									font-size: 28rpx;

								}

							}
						}

						text {
							// font-family: PingFang-SC, PingFang-SC;
							// font-weight: 500;
							// font-size: 28rpx;
							// color: #333333;
							@include left-font(28rpx)
						}
					}
				}

				.p-price {
					margin: 24rpx 0;

					view {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}

					view:nth-child(2) {
						font-weight: 600;
					}

					.payAmount {
						// font-family: PingFang-SC, PingFang-SC;
						// font-weight: 400;
						// font-size: 28rpx;
						// color: #000000;

						text {
							font-weight: 600;
							font-size: 36rpx;

						}
					}
				}
			}
		}


		.settlement_panle {
			width: 100%;
			height: 170rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;

			.left {
				margin-left: 20rpx;

				view {
					text:nth-child(1) {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #3E3E3E;
					}

					text:nth-child(2) {
						font-family: DINAlternate, DINAlternate;
						font-weight: bold;
						font-size: 40rpx;
						color: #F2270B;
						line-height: 48rpx;
					}
				}

			}

			.right {
				.settlement {
					margin-right: 16rpx;
					width: 202rpx;
					height: 80rpx;
					background: #E86748;
					border-radius: 40rpx;
					text-align: center;

					text {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 80rpx;
					}
				}


			}
		}

	}
</style>